<template>
  <div class="admin-production-list">
    <br>
    <el-tabs value="0" @tab-click="topBarClick">
      <el-tab-pane label="全部" name="0"/>
      <el-tab-pane v-for="(v) in typeArr" :key="v" :label="v"/>
    </el-tabs>
    <w-cell v-for="(v, k) in loadListModel.dataArr" :key="k" :item="v" @reload="reloadData"/>
    <!--底部加载更多-->
    <w-load-more
      :loadType="loadListModel.loadType"
      @loadMore="loadData"
    />
  </div>
</template>

<script lang="ts">
/*作品*/
import ProductModel from "@/models/ProductModel";
import WLoadMore from "@/components/pc/loadMore/index.vue";
import YBListLoad from "@/models/YBListLoad";
import API from "@/api/apis";
import WCell from "./cell.vue";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    WLoadMore,
    WCell
  }
})
export default class WebWorks extends Vue {
  loadListModel = new YBListLoad(ProductModel, API.production.all, {
    type: ""
  });

  // 类型数组
  typeArr: string[] = [];

  mounted() {
    this.getTypeArr();
  }

  // 顶部导航栏点击
  topBarClick(e: { label: string }) {
    const key = e.label === "全部" ? "" : e.label;
    this.loadListModel.otherData = { type: key };
    this.reloadData();
  }

  // 获取类型数组
  getTypeArr() {
    ProductModel.typeDistinct()
      .then((dataArr: any) => {
        this.typeArr = dataArr;
      })
      .catch(() => {});
  }

  // 重新加载数据
  reloadData() {
    this.loadListModel.clearData();
    this.loadData();
  }

  // 加载列表数据
  loadData() {
    this.loadListModel
      .loadData()
      .then(() => {})
      .catch(() => {});
  }
}
</script>

<style>
.admin-production-list .warning-row {
  background: oldlace;
}
</style>
